<template>
  <div>
    <!-- 搜索添加栏 -->
    <Row>
      <Card>
        <div style="margin-top: 6px">
          <Form ref="searchData" :model="searchData" :rules="searchReg" :label-width="80">
            <Row>
              <i-col :xs="24" :md="12" :lg="6">
                <FormItem label="指标等级" prop="indexType">
                  <Select v-model="searchData.indexType" placeholder="请选择指标等级" style="width:185px">
                    <Option value="一级指标">一级指标</Option>
                    <Option value="二级指标">二级指标</Option>
                  </Select>
                </FormItem>
              </i-col>
              <i-col :xs="24" :md="12" :lg="6">
                <FormItem label="指标名称">
                  <Input
                    search
                    placeholder="请输入指标名称"
                    v-model="searchData.indexName"
                    style="width: auto"
                  >
                    <Icon type="ios-search" slot="suffix" />
                  </Input>
                </FormItem>
              </i-col>
              <i-col :xs="24" :md="12" :lg="6" v-show="searchData.indexType==='二级指标'">
                <FormItem label="责任单位">
                  <Input
                    search
                    placeholder="请输入责任单位"
                    v-model="searchData.responsibilityUnit"
                    style="width: auto"
                  >
                    <Icon type="ios-search" slot="suffix" />
                  </Input>
                </FormItem>
              </i-col>
              <i-col :xs="24" :md="12" :lg="6" v-show="searchData.indexType==='二级指标'">
                <FormItem label="牵头单位">
                  <Input
                    search
                    placeholder="请输入牵头单位"
                    v-model="searchData.leadUnitName"
                    style="width: auto"
                  >
                    <Icon type="ios-search" slot="suffix" />
                  </Input>
                </FormItem>
              </i-col>
            </Row>
            <Row>
              <i-col :xs="24" :md="12" :lg="6">
                <FormItem label="指标年份">
                  <Col span="12">
                    <DatePicker
                      type="year"
                      v-model="searchData.dateTime"
                      format="yyyy"
                      @on-change="handlerFormat"
                      placeholder="请选择指标年份"
                      style="width:185px"
                    ></DatePicker>
                  </Col>
                </FormItem>
              </i-col>
            </Row>
            <FormItem>
              <Button type="primary" @click="seachSubmit(1,10)">提交搜索</Button>
              <Button @click="seachReset('searchData')" style="margin-left: 8px">重置搜索</Button>
            </FormItem>
          </Form>
        </div>
      </Card>
    </Row>

    <!-- 导入并校验 -->
    <div v-if="isSpuerAdmins.add" style="margin-top:10px;">
      <!--
          本地  action="api/townIndicators/uploadTownIndex"
          线上  action="/townIndicators/uploadTownIndex"
      -->
      <Card title="导入EXCEL">
        <Upload
          ref="upload"
          :before-upload="handleUpload2"
          :on-success="handleSuccess2"
          :format="['xls','xlsx']"
          :on-format-error="handleFormatError2"
          :action="importUrl"
        >
          <Button type="success" @click="downTownDataFc" style="margin-right:20px;">下载县对乡镇指标模板</Button>
          <Tooltip content="温馨提示：上传文件请先下载模板，依照模板格式上传" placement="top-start" max-width="220">
            <Button type="primary" icon="ios-cloud-upload-outline" @click="exports">导入县对乡镇指标</Button>
          </Tooltip>
        </Upload>

        <div v-if="file !== null">
          文件名: {{ file.name }}
          <Button type="primary" @click="upload" :disabled="isBanUpload">点击上传</Button>
          <h3 style="color:#ff6600;">{{warnTips}}</h3>
          <div style="margin:10px 0;">
            导入批次号：{{batchNum}}
            <DatePicker
              type="year"
              format="yyyy"
              v-model="indexTime"
              @on-change="changeIndexTime"
              placeholder="请选择指标年份(必填)"
              style="width: auto;margin:0 10px;"
            ></DatePicker>
            <Tooltip
              content="温馨提示：确认上传前请确认已经选择了指标年份 和 重新校验所上传的数据！！"
              max-width="250"
              placement="top-start"
            >
              <Button type="success" @click="clickExport" :disabled="!isBanUpload">确认导入</Button>
            </Tooltip>
          </div>
        </div>
        <!-- 校验表格回显 -->
        <Table
          v-if="isShowCheckTable"
          border
          :height="450"
          :columns="checkHead"
          :data="checkData"
          :row-class-name="rowClassName"
          :loading="checkTableLoading"
        ></Table>
      </Card>
    </div>
    <!-- 一级和二级指标表格 -->
    <Row style="margin-top:20px">
      <Card>
        <div class="btn-arrs">
          <Button v-if="isSpuerAdmins.add" type="info" @click="addTarget($event)">添加乡镇指标</Button>
        </div>
        <div>
          <Table
            :loading="TableOneLoading"
            border
            :columns="colIndexOne"
            :data="indexOne"
            v-if="isIndexOne"
          ></Table>
          <Table
            :loading="TableTwoLoading"
            border
            :columns="colIndexTwo"
            :data="indexTwo"
            v-if="isIndexTwo"
          ></Table>
        </div>
        <div style="margin-top:20px;margin-left:40%">
          <Page
            @on-change="pageNumberChange"
            :current="pageCurrent"
            :page-size="pageSize"
            :total="pageTotal"
            @on-page-size-change="pageSizeChange"
            show-elevator
            show-sizer
          />
        </div>
      </Card>
    </Row>

    <!-- 模态框  增加指标-->
    <Modal v-model="addIndex" :title="targetName" width="700px" @on-cancel="closeAddIndex">
      <Form ref="formCountyList" :model="formCountyList" :rules="ruleValidate" :label-width="80">
        <FormItem label="名称指标" prop="indexName">
          <Input v-model="formCountyList.indexName" placeholder="请输入指标名称" style="width:500px"></Input>
        </FormItem>
        <FormItem label="指标等级" prop="indexType">
          <Select
            v-model="formCountyList.indexType"
            :disabled="isIndexType"
            placeholder="请选择指标等级"
            style="width:500px"
          >
            <Option value="一级指标">一级指标</Option>
            <Option value="二级指标">二级指标</Option>
          </Select>
        </FormItem>
        <FormItem label="上级指标" prop="superiorIndexId" v-if="isFormFlase">
          <Select
            v-model="formCountyList.superiorIndexId"
            placeholder="请选择上级指标"
            style="width:500px"
          >
            <Option v-for="item in lastIndex" :value="item.id+''" :key="item.id">{{ item.indexName}}</Option>
          </Select>
        </FormItem>
        <FormItem label="匹配单位" prop="leadUnit" v-if="isFormFlase">
          <Select
            filterable
            clearable
            placeholder="请选择匹配单位"
            v-model="formCountyList.leadUnit"
            style="width:500px"
          >
            <Option
              v-for="item in getDepartmentList"
              :value="item.departcode"
              :key="item.departcode"
            >{{ item.department }}</Option>
          </Select>
        </FormItem>
        <Row>
          <i-col :xs="24" :md="8" :lg="12">
            <FormItem label="牵头单位" v-if="isFormFlase" prop="leadUnitName">
              <Input v-model="formCountyList.leadUnitName" placeholder="请输入牵头单位" style="width:auto"></Input>
            </FormItem>
          </i-col>
          <i-col :xs="24" :md="8" :lg="12">
            <FormItem label="责任单位" v-if="isFormFlase" prop="responsibilityUnit">
              <Input
                v-model="formCountyList.responsibilityUnit"
                placeholder="请输入责任单位"
                style="width:auto"
              ></Input>
            </FormItem>
          </i-col>
        </Row>
        <FormItem label="乡镇权数" style="width:100%" v-if="isFormFlase">
          <div class="villages-towns">
            <ul>
              <li class="item">
                <div class="item-title">塘前</div>
                <InputNumber :max="100" :min="0" style="width:71px" v-model="formCountyList['塘前乡']"></InputNumber>
              </li>
              <li class="item">
                <div class="item-title">葛岭</div>
                <InputNumber :max="100" :min="0" style="width:71px" v-model="formCountyList['葛岭镇']"></InputNumber>
              </li>
              <li class="item">
                <div class="item-title">樟城</div>
                <InputNumber :max="100" :min="0" style="width:71px" v-model="formCountyList['樟城镇']"></InputNumber>
              </li>
              <li class="item">
                <div class="item-title">城锋</div>
                <InputNumber :max="100" :min="0" style="width:71px" v-model="formCountyList['城峰镇']"></InputNumber>
              </li>
              <li class="item">
                <div class="item-title">清凉</div>
                <InputNumber :max="100" :min="0" style="width:71px" v-model="formCountyList['清凉镇']"></InputNumber>
              </li>
              <li class="item">
                <div class="item-title">富泉</div>
                <InputNumber :max="100" :min="0" style="width:71px" v-model="formCountyList['富泉乡']"></InputNumber>
              </li>
              <li class="item">
                <div class="item-title">岭路</div>
                <InputNumber :max="100" :min="0" style="width:71px" v-model="formCountyList['岭路乡']"></InputNumber>
              </li>
            </ul>
            <ul>
              <li class="item">
                <div class="item-title">赤锡</div>
                <InputNumber :max="100" :min="1" style="width:71px" v-model="formCountyList['赤锡乡']"></InputNumber>
              </li>
              <li class="item">
                <div class="item-title">梧桐</div>
                <InputNumber :max="100" :min="1" style="width:71px" v-model="formCountyList['梧桐镇']"></InputNumber>
              </li>
              <li class="item">
                <div class="item-title">嵩口</div>
                <InputNumber :max="100" :min="1" style="width:71px" v-model="formCountyList['嵩口镇']"></InputNumber>
              </li>
              <li class="item">
                <div class="item-title">洑口</div>
                <InputNumber :max="100" :min="0" style="width:71px" v-model="formCountyList['洑口乡']"></InputNumber>
              </li>
              <li class="item">
                <div class="item-title">盖洋</div>
                <InputNumber :max="100" :min="0" style="width:71px" v-model="formCountyList['盖洋乡']"></InputNumber>
              </li>
              <li class="item">
                <div class="item-title">长庆</div>
                <InputNumber :max="100" :min="0" style="width:71px" v-model="formCountyList['长庆镇']"></InputNumber>
              </li>
              <li class="item">
                <div class="item-title">东洋</div>
                <InputNumber :max="100" :min="0" style="width:71px" v-model="formCountyList['东洋乡']"></InputNumber>
              </li>
            </ul>
            <ul>
              <li class="item">
                <div class="item-title">霞拔</div>
                <InputNumber :max="100" :min="0" style="width:71px" v-model="formCountyList['霞拔乡']"></InputNumber>
              </li>
              <li class="item">
                <div class="item-title">同安</div>
                <InputNumber :max="100" :min="0" style="width:71px" v-model="formCountyList['同安镇']"></InputNumber>
              </li>
              <li class="item">
                <div class="item-title">大洋</div>
                <InputNumber :max="100" :min="0" style="width:71px" v-model="formCountyList['大洋镇']"></InputNumber>
              </li>
              <li class="item">
                <div class="item-title">盘谷</div>
                <InputNumber :max="100" :min="0" style="width:71px" v-model="formCountyList['盘谷乡']"></InputNumber>
              </li>
              <li class="item">
                <div class="item-title">红星</div>
                <InputNumber :max="100" :min="1" style="width:71px" v-model="formCountyList['红星乡']"></InputNumber>
              </li>
              <li class="item">
                <div class="item-title">白云</div>
                <InputNumber :max="100" :min="1" style="width:71px" v-model="formCountyList['白云乡']"></InputNumber>
              </li>
              <li class="item">
                <div class="item-title">丹云</div>
                <InputNumber :max="100" :min="1" style="width:71px" v-model="formCountyList['丹云乡']"></InputNumber>
              </li>
            </ul>
          </div>
        </FormItem>
        <FormItem label="指标年份" prop="dateTime">
          <DatePicker
            type="year"
            :value="formCountyList.dateTime"
            format="yyyy"
            @on-change="formSelelctTime"
            placeholder="请选择指标年份"
            style="width:185px"
          ></DatePicker>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button
          v-if="isSpuerAdmins.add"
          type="primary"
          :loading="submitloading"
          style="width:120px"
          @click="BtnSubmit('formCountyList')"
        >
          <span v-if="!submitloading">提交</span>
          <span v-else>提交中...</span>
        </Button>
        <Button @click="closeAddIndex">取消</Button>
      </div>
    </Modal>

    <!--  导入检验回显模态框 -->
    <Modal v-model="checkModal" title="编辑" width="700px" @on-cancel="closeCheckModal">
      <Form ref="checkForm" :model="checkForm" :label-width="80">
        <FormItem label="牵头单位">
          <Input disabled v-model="checkForm.name23" placeholder="请输入牵头单位"></Input>
        </FormItem>
        <FormItem label="匹配单位">
          <Select filterable clearable v-model="checkForm.cell23">
            <Option
              v-for="item in getDepartmentList"
              :value="item.departcode"
              :key="item.departcode"
            >{{ item.department }}</Option>
          </Select>
        </FormItem>

        <FormItem label="责任单位">
          <Input disabled v-model="checkForm.name24" placeholder="请输入责任单位"></Input>
        </FormItem>
        <FormItem label="备注">
          <Input disabled v-model="checkForm.remark" type="textarea" placeholder="请输入备注" />
        </FormItem>
        <FormItem label="一级指标">
          <Input disabled v-model="checkForm.cell0" placeholder="请输入一级指标"></Input>
        </FormItem>
        <FormItem label="二级指标">
          <Input disabled v-model="checkForm.cell1" placeholder="请输入二级指标"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button
          type="primary"
          style="width:120px"
          @click="handleSave"
          :loading="loadingStatus"
        >{{loadingStatus ? "提交中..." : "提交"}}</Button>
        <Button @click="closeCheckModal">取消</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import excel from "@/libs/excel";
import { countyAjax } from "@/api/countyTown";
import { URL } from "@/libs/util";
const regNumber = new RegExp("^[0-9]*$");
// 以防命名冲突
const HOST = URL;
// 查询校验
const QUERYCHECK_URL = "/townIndicators/queryImport";
// 确认导入接口
const CONFIRM_URL = "/townIndicators/saveExcelData";
// 修改保存
const UPDEXCEL_URL = "/townIndicators/updateExcelData";
export default {
  data() {
    const validateWeight = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请填写分数"));
      } else if (!regNumber.test(value)) {
        callback(new Error("请输入数字"));
      } else {
        callback();
      }
    };
    return {
      // 是否为超级管理员
      isSpuerAdmins: {
        add: true,
        action: "inline-block"
      },
      addIndex: false, // 显示增加模态框
      isIndexOne: false, // 显示指标等级一
      isIndexTwo: true, // 显示指标等级二
      submitloading: false, // 增加模态框确定loading
      TableOneLoading: true, // 指标等级一Loading
      TableTwoLoading: true, // 指标等级二Loading
      checkTableLoading: false, // 校验表格loading
      isFormFlase: false, // 二级指标显示input
      isFormTrue: true, // 一级指标显示input
      excelTime: "", // excel 上传年月选择
      targetName: "指标增加",
      pageTotal: 0, // 总页数
      pageSize: 10, // 显示条数
      pageNumber: 1, // 页码
      superiorIndexSelect: [], // 储存一级，form上级指标根据现有的一级指标
      isIndexType: false, // 更新指标 禁止更新指标等级
      pageCurrent: 1,
      searchData: {
        indexType: "二级指标",
        responsibilityUnit: "",
        leadUnitName: "",
        indexName: "",
        dateTime: ""
      },
      // 上传表格
      uploadLoading: false,
      progressPercent: 0,
      showProgress: false,
      showRemoveFile: false,
      file: null,
      tableData: [],
      tableTitle: [],
      tableLoading: false,
      UploadLoadingBtn: false,
      colIndexOne: [
        {
          type: "index",
          width: 60,
          align: "center"
        },
        {
          title: "指标等级",
          key: "indexType",
          width: 150
        },
        {
          title: "指标名称",
          key: "indexName"
        },
        {
          title: "分值",
          key: "weight"
        },
        {
          title: "年份",
          key: "dateTime"
        },
        {
          title: "牵头单位",
          key: "leadUnit"
        },
        {
          title: "责任单位",
          key: "responsibilityUnit"
        },
        {
          title: "Action",
          key: "action",
          width: 180,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "20px"
                  },
                  on: {
                    click: () => {
                      if (params.row.id !== "") {
                        var row = params.row;
                        this.formCountyList = Object.assign(row, {
                          year: params.row.dateTime
                        });
                        this.formCountyList = JSON.parse(
                          JSON.stringify(this.formCountyList)
                        );
                      } else {
                        this.$Message.error("刷新页面后尝试此操作");
                        return;
                      }
                      this.addIndex = true;
                      this.isFormfalse = true;
                      this.isFormTrue = false;
                      this.targetName = "编辑指标";
                      this.isIndexType = true; // 更新指标 禁止更新指标等级
                    }
                  }
                },
                "查看或编辑"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  style: {
                    display: this.isSpuerAdmins.action
                  },
                  on: {
                    click: () => {
                      this.remove(params);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      colIndexTwo: [
        {
          title: "指标等级",
          key: "indexType",
          width: 100,
          fixed: "left"
        },
        {
          title: "指标名称",
          key: "indexName",
          width: 150,
          fixed: "left"
        },
        {
          title: "上级指标",
          key: "superiorIndexId",
          width: 150,
          fixed: "left",
          render: (h, params) => {
            let texts = "";
            this.lastIndex.forEach(item => {
              if (params.row.superiorIndexId === item.id + "") {
                texts = item.indexName;
              }
            });
            return h("div", {}, texts);
          }
        },
        {
          title: "指标年份",
          key: "dateTime",
          width: 100,
          fixed: "left"
        },
        {
          title: "塘前",
          key: "塘前乡",
          width: 70
        },
        {
          title: "葛岭",
          key: "葛岭镇",
          width: 70
        },
        {
          title: "樟城",
          key: "樟城镇",
          width: 70
        },
        {
          title: "城峰",
          key: "城峰镇",
          width: 70
        },
        {
          title: "清凉",
          key: "清凉镇",
          width: 70
        },
        {
          title: "富泉",
          key: "富泉乡",
          width: 70
        },
        {
          title: "岭路",
          key: "岭路乡",
          width: 70
        },
        {
          title: "赤锡",
          key: "赤锡乡",
          width: 70
        },
        {
          title: "梧桐",
          key: "梧桐镇",
          width: 70
        },
        {
          title: "嵩口",
          key: "嵩口镇",
          width: 70
        },
        {
          title: "洑口",
          key: "洑口乡",
          width: 70
        },
        {
          title: "盖洋",
          key: "盖洋乡",
          width: 70
        },
        {
          title: "长庆",
          key: "长庆镇",
          width: 70
        },
        {
          title: "东洋",
          key: "东洋乡",
          width: 70
        },
        {
          title: "霞拔",
          key: "霞拔乡",
          width: 70
        },
        {
          title: "同安",
          key: "同安镇",
          width: 70
        },
        {
          title: "大洋",
          key: "大洋镇",
          width: 70
        },
        {
          title: "盘谷",
          key: "盘谷乡",
          width: 70
        },
        {
          title: "红星",
          key: "红星乡",
          width: 70
        },
        {
          title: "白云",
          key: "白云乡",
          width: 70
        },
        {
          title: "丹云",
          key: "丹云乡",
          width: 70
        },
        {
          title: "牵头单位",
          key: "leadUnitName",
          width: 150
        },
        {
          title: "责任单位",
          key: "responsibilityUnit",
          width: 150
        },
        {
          title: "操作",
          key: "action",
          width: 180,
          align: "center",
          fixed: "right",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      if (params.row.id !== "") {
                        var row = params.row;
                        this.formCountyList = Object.assign(row, {
                          year: params.row.dateTime
                        });
                        this.formCountyList = JSON.parse(
                          JSON.stringify(this.formCountyList)
                        );
                      } else {
                        this.$Message.error("刷新页面后尝试此操作");
                        return;
                      }
                      console.log(this.formCountyList);
                      this.addIndex = true;
                      this.isIndexType = true;
                      this.isFormFlase = true;
                      this.isFormTrue = false;
                      this.targetName = "编辑指标";
                    }
                  }
                },
                "查看或编辑"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  style: {
                    display: this.isSpuerAdmins.action
                  },
                  on: {
                    click: () => {
                      this.remove(params);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      indexOne: [],
      indexTwo: [],
      ruleValidate: {
        indexName: [
          {
            required: true,
            message: "请输入指标名称",
            trigger: "blur"
          }
        ],
        leadUnitName: [
          {
            required: true,
            message: "请输入牵头单位",
            trigger: "blur"
          }
        ],
        responsibilityUnit: [
          {
            required: true,
            message: "请输入责任单位",
            trigger: "blur"
          }
        ],
        indexType: [
          {
            required: true,
            message: "请选择指标等级",
            trigger: "change"
          }
        ],
        weight: [
          {
            required: true,
            validator: validateWeight,
            trigger: "blur"
          }
        ],
        mainUnit: [
          {
            required: true,
            message: "请输入主要牵头单位",
            trigger: "blur"
          }
        ],
        leadUnit: [
          {
            required: true,
            message: "请输入匹配单位",
            trigger: "change"
          }
        ],
        dateTime: [
          {
            required: true,
            type: "string",
            message: "请选择年份",
            trigger: "change"
          }
        ],
        superiorIndexId: [
          {
            required: true,
            message: "请选择上级指标",
            trigger: "change"
          }
        ]
      },
      searchReg: {
        indexType: [
          {
            required: true,
            message: "请选择指标等级",
            trigger: "change"
          }
        ]
      },
      formCountyList: {
        indexName: "",
        indexType: "二级指标",
        responsibilityUnit: "",
        superiorIndexId: "",
        leadUnit: "",
        weight: "",
        score: "",
        dateTime: "",
        mainUnit: "",
        塘前乡: null, // 塘前
        葛岭镇: null, // 葛岭
        樟城镇: null, // 樟城
        城峰镇: null, // 城峰
        清凉镇: null, // 清凉
        富泉乡: null, // 富泉
        岭路乡: null, // 岭路
        赤锡乡: null, // 赤锡
        梧桐镇: null, // 梧桐
        嵩口镇: null, // 嵩口
        洑口乡: null, // 洑口
        盖洋乡: null, // 盖洋
        长庆镇: null, // 长庆
        东洋乡: null, // 东洋
        霞拔乡: null, // 霞拔
        同安镇: null, // 同安
        大洋镇: null, // 大洋
        盘谷乡: null, // 盘谷
        红星乡: null, // 红星
        白云乡: null, // 白云
        丹云乡: null // 丹云
      },
      // 导入的回显表
      batchNum: "", // 导入批次
      checkHead: [
        {
          title: "序号",
          type: "index",
          width: 60,
          align: "center"
        },
        {
          title: "备注",
          key: "remark",
          width: 200
        },
        {
          title: "牵头单位",
          key: "name23",
          width: 200
        },
        {
          title: "责任单位",
          key: "cell24",
          width: 200
        },

        {
          title: "一级指标",
          key: "cell0",
          width: 100
        },
        {
          title: "二级指标",
          key: "cell1",
          width: 150
        },
        {
          title: "塘前",
          key: "cell2",
          width: 70
        },
        {
          title: "葛岭",
          key: "cell3",
          width: 70
        },
        {
          title: "樟城",
          key: "cell4",
          width: 70
        },
        {
          title: "城峰",
          key: "cell5",
          width: 70
        },
        {
          title: "清凉",
          key: "cell6",
          width: 70
        },
        {
          title: "富泉",
          key: "cell7",
          width: 70
        },
        {
          title: "岭路",
          key: "cell8",
          width: 70
        },
        {
          title: "赤锡",
          key: "cell9",
          width: 70
        },
        {
          title: "梧桐",
          key: "cell10",
          width: 70
        },
        {
          title: "嵩口",
          key: "cell11",
          width: 70
        },
        {
          title: "洑口",
          key: "cell12",
          width: 70
        },
        {
          title: "盖洋",
          key: "cell13",
          width: 70
        },
        {
          title: "长庆",
          key: "cell14",
          width: 70
        },
        {
          title: "东洋",
          key: "cell15",
          width: 70
        },
        {
          title: "霞拔",
          key: "cell16",
          width: 70
        },
        {
          title: "同安",
          key: "cell17",
          width: 70
        },
        {
          title: "大洋",
          key: "cell18",
          width: 70
        },
        {
          title: "盘谷",
          key: "cell19",
          width: 70
        },
        {
          title: "红星",
          key: "cell20",
          width: 70
        },
        {
          title: "白云",
          key: "cell21",
          width: 70
        },
        {
          title: "丹云",
          key: "cell22",
          width: 70
        },
        {
          title: "操作",
          key: "action",
          width: 100,
          fixed: "right",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "large"
                  },
                  on: {
                    click: () => {
                      this.checkForm = JSON.parse(JSON.stringify(params.row));
                      console.log(params.row);
                      this.checkModal = true;
                    }
                  }
                },
                "编辑"
              )
            ]);
          }
        }
      ],
      checkData: [],
      isBanUpload: false,
      isShowCheckTable: false,
      indexTime: "", // 指标时间
      warnTips: "", // 警告提示
      importUrl: URL + "/townIndicators/uploadTownIndex", // 导入县对乡镇指标url
      // 校验模态框
      checkModal: false,
      checkForm: {
        name23: "", // 牵头单位
        remark: "", // 备注
        cell23: "", // 匹配单位
        cell24: "", // 责任单位
        cell0: "", // 一级指标
        cell1: "" // 二级指标
      },
      loadingStatus: false,
      lastIndex: [] // 上级指标
    };
  },
  methods: {
    // 关闭指标添加模态框
    closeAddIndex() {
      this.addIndex = false;
      this.isIndexType = false;
    },
    // from 添加指标选择时间
    formSelelctTime(year) {
      this.formCountyList.dateTime = year;
    },
    // seach指标时间查询
    handlerFormat(year) {
      this.searchData.dateTime = year;
    },
    // excel 表格添加时间
    updateTime(year) {
      this.excelTime = year;
    },
    changeIndexTime(year) {
      this.indexTime = year;
    },
    // 指标提交
    BtnSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.submitloading = true;
          // 根据 targetName 判断是修改还是编辑
          if (this.targetName === "指标增加") {
            this._addIndexCounty(this.formCountyList)
              .then(res => {
                if (res.code === "200") {
                  this.$Message.success("成功");
                  this.submitloading = false;
                  // 按照填入的indexType刷新页面
                  if (this.formCountyList.indexType === "一级指标") {
                    let indexType = {
                      indexType: this.formCountyList.indexType
                    };
                    this._getCountyList(
                      indexType,
                      this.pageNumber,
                      this.pageSize
                    ).then(res => {
                      this.superiorIndexSelect = [];
                      res.results.firstIndex.forEach(item => {
                        this.superiorIndexSelect.push(item.indexName);
                      });
                      this.indexOne = res.results.list;
                      this.addIndex = false;
                    });
                  } else if (this.formCountyList.indexType === "二级指标") {
                    let indexType = {
                      indexType: this.formCountyList.indexType
                    };
                    this._getCountyList(
                      indexType,
                      this.pageNumber,
                      this.pageSize
                    ).then(res => {
                      this.indexTwo = res.results.list;
                      this.addIndex = false;
                      this.isIndexOne = false;
                      this.isIndexTwo = true;
                      this.TableTwoLoading = false;
                    });
                  }
                  this.addIndex = false;
                } else {
                  thhis.$Message.error(res.message);
                  this.submitloading = false;
                }
              })
              .catch(err => {
                console.log(err);
              });
          } else if (this.targetName === "编辑指标") {
            this._updateIndexCounty(this.formCountyList).then(res => {
              if (res.code === "200") {
                this.submitloading = false;
                this.addIndex = false;
                this.$Message.success("修改成功");
                // 重新请求
                this.seachSubmit(this.pageNumber, this.pageSize);
              } else {
                this.$Message.error(res.message);
                this.submitloading = false;
              }
            });
          }
        } else {
          this.$Message.error("带*为必填项");
        }
      });
    },
    // 删除
    remove(params) {
      this.$Modal.confirm({
        title: "删除指标",
        content: "<p>删除后将无法恢复</p>",
        onOk: () => {
          this._removeIndexCounty({
            id: params.row.id
          }).then(res => {
            if (res.code === "200") {
              // 删除成功 刷新页面
              this.$Message.success("删除成功");
              this.seachSubmit(this.pageNumber, this.pageSize);
            } else {
              this.$Message.error("操作失败");
            }
          });
        },
        onCancel: () => {
          this.$Message.info("已取消");
        }
      });
    },
    // 打开模态框
    addTarget(e) {
      this.resetForm();
      this.isFormFlase = false;
      this.isFormTrue = true;
      this.targetName = "指标增加";
      this.addIndex = true;
    },
    // 提交搜索
    seachSubmit(pageNumber, pageSize) {
      this.pageCurrent = pageNumber;
      this.pageSize = pageSize;
      this.$refs["searchData"].validate(valid => {
        if (valid) {
          this.TableOneLoading = true;
          this.TableTwoLoading = true;
          // 清除formCityList表单
          this.resetForm();
          this._getCountyList(this.searchData, pageNumber, pageSize).then(
            res => {
              if (res.code === "200") {
                this.superiorIndexSelect = [];
                res.results.firstIndex.forEach(item => {
                  this.superiorIndexSelect.push(item.indexName);
                });
                // 按照IndexType类别 填入不同Tabel里
                if (this.searchData.indexType === "一级指标") {
                  this.$Message.success("查询成功");
                  this.indexOne = res.results.list;
                  // //this.pageTotal = parseInt(res.results.pageTotal) * 10;
                  this.TableOneLoading = false;
                  this.isIndexOne = true;
                  this.isIndexTwo = false;
                  this.submitloading = false; // 如果重置提交按钮的Loading
                } else if (this.searchData.indexType === "二级指标") {
                  this.isIndexOne = false;
                  this.TableTwoLoading = false;
                  this.isIndexTwo = true;
                  this.$Message.success("查询成功");
                  this.indexTwo = res.results.list;
                  // //this.pageTotal = parseInt(res.results.pageTotal) * 10;
                }
              } else {
                this.$Message.error("查询失败");
              }
            }
          );
        } else {
          this.$Message.error("带*不可为空");
        }
      });
    },
    seachReset(name) {
      this.$refs[name].resetFields();
      this.searchData = {
        indexType: "一级指标",
        responsibilityUnit: "",
        leadUnit: "",
        indexName: ""
      };
    },
    resetForm() {
      this.$refs["formCountyList"].resetFields();
      this.formCountyList = {
        indexName: "",
        indexType: "",
        superiorIndexId: "",
        leadUnit: "",
        responsibilityUnit: "",
        weight: "",
        score: "",
        dateTime: "",
        mainUnit: "",
        塘前乡: 0, // 塘前
        葛岭镇: 0, // 葛岭
        樟城镇: 0, // 樟城
        城峰镇: 0, // 城峰
        清凉镇: 0, // 清凉
        富泉乡: 0, // 富泉
        岭路乡: 0, // 岭路
        赤锡乡: 0, // 赤锡
        梧桐镇: 0, // 梧桐
        嵩口镇: 0, // 嵩口
        洑口乡: 0, // 洑口
        盖洋乡: 0, // 盖洋
        长庆镇: 0, // 长庆
        东洋乡: 0, // 东洋
        霞拔乡: 0, // 霞拔
        同安镇: 0, // 同安
        大洋镇: 0, // 大洋
        盘谷乡: 0, // 盘谷
        红星乡: 0, // 红星
        白云乡: 0, // 白云
        丹云乡: 0 // 丹云
      };
    },
    // 页码
    pageNumberChange(number) {
      this.pageNumber = number;
      this.seachSubmit(this.pageNumber, this.pageSize);
    },
    // 一页的个数
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.seachSubmit(this.pageNumber, this.pageSize);
    },
    // 查询数据
    _getCountyList(form, pageNumber, pageSize) {
      const url = "/townIndicators/query";
      const keyOne = "townIndicatorsFilter";
      let formData = Object.assign(form, {
        pageSize: pageSize,
        pageNumber: pageNumber
      });
      return new Promise((resolve, reject) => {
        countyAjax({ formData, url, keyOne }).then(res => {
          if (res.data.code === "200") {
            resolve(res.data);
          } else {
            reject(error);
          }
        });
      });
    },
    // 查询校验表格
    _queryCheckAjax(form, url, pageNumber, pageSize) {
      const keyOne = "excelDTO";
      let formData = Object.assign(form, {
        pageSize: pageSize,
        pageNumber: pageNumber
      });
      return new Promise((resolve, reject) => {
        countyAjax({ formData, url, keyOne }).then(res => {
          if (res.data.code === "200") {
            resolve(res.data);
          } else {
            reject(error);
          }
        });
      });
    },
    // 添加数据
    _addIndexCounty(formData) {
      const url = "/townIndicators/insert";
      const keyOne = "townIndicatorsEntity";
      const keyTwo = "townList";
      return new Promise((resolve, reject) => {
        countyAjax({ formData, url, keyOne, keyTwo }).then(res => {
          if (res.data !== undefined) {
            resolve(res.data);
          } else {
            reject(eer);
          }
        });
      });
    },
    // 更新修改
    _updateIndexCounty(formData) {
      const url = "/townIndicators/update";
      const keyOne = "townIndicatorsEntity";
      const keyTwo = "townList";
      return new Promise((resolve, reject) => {
        countyAjax({ formData, url, keyOne, keyTwo }).then(res => {
          if (res.data !== undefined) {
            resolve(res.data);
          } else {
            reject();
          }
        });
      });
    },
    // 删除
    _removeIndexCounty(formData) {
      const url = "/townIndicators/delete";
      const keyOne = "townIndicatorsEntity";
      const keyTwo = "townList";
      return new Promise((resolve, reject) => {
        countyAjax({ formData, url, keyOne, keyTwo }).then(res => {
          if (res.data !== undefined) {
            resolve(res.data);
          } else {
            reject(eer);
          }
        });
      });
    },
    /**
     * 下载县对乡镇指标上传模板
     */
    downTownDataFc() {
      window.open(
        HOST +
          "/townScore/downTownScoreMoudle?fileName=townIndexMould.xlsx&chinaName=县对乡镇指标上传模板.xlsx"
      );
    },
    // 导入excel
    // 阻止自动上传文件
    handleUpload2(file) {
      this.file = file;
      return false;
    },
    // 上传文件
    handleSuccess2(res, file) {
      if (res.code === "200") {
        this.batchNum = res.results.batchNum;
        this.$Notice.success({
          title: res.message
        });
        let formData = {
          batchNum: this.batchNum
        };
        // 回显校验表格
        this.checkTableLoading = true;
        this._queryCheckAjax(formData, QUERYCHECK_URL).then(ressult => {
          if (ressult.code === "200") {
            this.checkData = ressult.results.list;
            this.isBanUpload = true;
            this.checkTableLoading = false;
            this.$Message.success(ressult.message);
            this.warnTips = ressult.results.warn;
          } else {
            this.$Message.error(ressult.message);
          }
        });
      } else if (res.code === "500") {
        this.$Notice.error({
          title: res.message
        });
      }
    },
    // 点击上传文件
    upload() {
      this.$refs.upload.post(this.file); // 请求
      this.isShowCheckTable = true;
    },
    // 验证上传格式
    handleFormatError2(file) {
      this.$Notice.warning({
        title: "文件格式错误",
        desc: "文件" + file.name + " 格式错误, 请选择xls或者xlsx"
      });
    },
    // 最终确认认导入
    clickExport() {
      if (this.indexTime !== "") {
        this.$Modal.confirm({
          width: 600,
          title: "是否确认导入",
          content:
            "<p>如有橙黄警告信息数据，该条数据将不会被保存，是否确认导入？</p>" +
            "<p>" +
            this.warnTips +
            "</p>",
          onOk: () => {
            this.confirmImport();
          },
          onCancel: () => {}
        });
      } else {
        this.$Message.error("请选择导入指标年份");
      }
    },
    // 确认导入
    confirmImport() {
      if (this.indexTime !== "") {
        let formData = {
          batchNum: this.batchNum,
          dateTime: this.indexTime
        };
        this._queryCheckAjax(formData, CONFIRM_URL).then(res => {
          if (res.code === "200") {
            this.$Message.success(res.message);
          } else {
            this.$Message.error(res.message);
          }
          this.isShowCheckTable = false;
          // 清除数据
          setTimeout(() => {
            this.isBanUpload = false;
            this.indexsTime = "";
            this.warnTips = "";
            this.file = null;
          }, 500);
        });
      } else {
        this.$Message.error("请先选择指标年份");
      }
    },
    // 修改保存
    handleSave() {
      this.loadingStatus = true;
      let formData = this.checkForm;
      this._queryCheckAjax(formData, UPDEXCEL_URL).then(res => {
        this.checkTableLoading = true;
        this.checkModal = false;
        if (res.code === "200") {
          this.checkData = res.results.list;
          this.checkTableLoading = false;
          this.loadingStatus = false;
          this.$Message.success(res.message);
          this.warnTips = res.results.warn;
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    selectTestType(val) {
      let arr = this.$store.state.user.departmentList; // 获取单位数组
      for (let i = 0; i < arr.length; i++) {
        if (val === arr[i].departcode) {
          return arr[i].department;
        }
      }
    },
    /**
     * 校验表格时判断是否有误显示红色
     * @param {row} 表格行数据
     */
    rowClassName(row, index) {
      if (row.avail === 0) {
        return "demo-table-error-row";
      }
      return "";
    },
    exports() {
      this.isBanUpload = false;
    },
    closeCheckModal() {
      this.checkModal = false;
    }
  },
  computed: {
    getDepartmentList() {
      return this.$store.state.user.departmentList;
    }
  },
  watch: {
    formCountyList: {
      handler(newVal, oldVal) {
        if (newVal.indexType === "一级指标") {
          this.isFormFlase = false;
          this.isFormTrue = true;
        } else if (newVal.indexType === "二级指标") {
          this.isFormFlase = true;
          this.isFormTrue = false;
        }
      },
      deep: true
    }
  },
  created() {
    this._getCountyList(
      this.formCountyList,
      this.pageNumber, // 码数
      this.pageSize // 页数
    ).then(res => {
      // 现有的一级指标
      res.results.firstIndex.forEach(item => {
        this.superiorIndexSelect.push(item.indexName);
      });
      // this.pageTotal = parseInt(res.results.pageTotal) * 10;
      this.indexTwo = res.results.list;
      this.TableTwoLoading = false;
      // 赋值上级指标
      this.lastIndex = res.results.firstIndex;
    });

    // 获取是否为超级管理员
    let isSuperAdmin = sessionStorage.getItem("isSuperAdmin");
    this.globalFunction2(isSuperAdmin);
  }
};
</script>
<style>
.villages-towns {
  margin: 0px 0 30px 0px;
}
.villages-towns ul {
  list-style-type: none;
}
.villages-towns .item {
  display: inline-block;
}
.villages-towns .item .ivu-input {
  font-size: 14px;
}
.villages-towns .item .item-title {
  width: 71px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  background: #03a9f4;
  color: #ffffff;
}
.ivu-table .demo-table-error-row td {
  background-color: #ff6600;
  color: #fff;
}
</style>
